<template>
    <el-row>
        <el-col :span="24" class="bannerIndex">
            <off-header></off-header>
            <el-col :span="24">
                <div class="bannerFonts">
                    <h3><span></span>专注优质服务<span></span></h3>
                    <h1>一站式金融服务专家</h1>
                    <p class="p">华远财富作为第三方投资管理平台，多年来专门为国内外包括私募、信托、 投顾等机构提供居间服务和信息服务。</p>
                    <p class="pButton">
                       <a href="../../../路由列表.txt" download="路由列表.txt"> <el-button round class="loginIS"><img src="../../assets/offWeb/Windows.png"/>电脑端下载</el-button></a>
                    </p>
                    <p class="pDownArrow"><a  href="../../../路由列表.txt" download="路由列表.txt"><img src="../../assets/offWeb/downArrow.png"/></a></p>
                </div>
            </el-col>
        </el-col>
        <el-col :span="24" class="indexDiv1">
            <h3><span></span>优质服务分区<span></span></h3>
            <p class="font1">撒子的道理要分为五个区能提高撒子效率 <br/>从而达到撒子优质服务质服务质服务质服务质服务质服务质服务</p>
            <ul>
                <li>
                    <p class="img"><img src="../../assets/offWeb/ioc1.png"/></p>
                    <h4>配资席位</h4>
                    <p>介绍介绍介绍介绍介绍介绍介绍 绍介绍绍介绍介绍介绍介绍介绍介绍介 </p>
                </li>
                <li>
                    <p class="img"><img src="../../assets/offWeb/ioc2.png"/></p>
                    <h4>融券做空</h4>
                    <p>介绍介绍介绍介绍介绍介绍介绍 绍介绍绍介绍介绍介绍介绍介绍介绍介 </p>
                </li>
                <li>
                    <p class="img"><img src="../../assets/offWeb/ioc3.png"/></p>
                    <h4>买方调研报告</h4>
                    <p>介绍介绍介绍介绍介绍介绍介绍 绍介绍绍介绍介绍介绍介绍介绍介绍介 </p>
                </li>
                <li>
                    <p class="img"><img src="../../assets/offWeb/ioc4.png"/></p>
                    <h4>市值管理机制</h4>
                    <p>介绍介绍介绍介绍介绍介绍介绍 绍介绍绍介绍介绍介绍介绍介绍介绍介 </p>
                </li>
                <li>
                    <p class="img"><img src="../../assets/offWeb/ioc4.png"/></p>
                    <h4>定增收购</h4>
                    <p>介绍介绍介绍介绍介绍介绍介绍 绍介绍绍介绍介绍介绍介绍介绍介绍介 </p>
                </li>
            </ul>
        </el-col>
        <el-col :span="24">
            <off-footer></off-footer>
        </el-col>

    </el-row>
</template>
<script type="text/ecmascript-6">
    import OffHeader from '../../components/offWeb/off-header.vue'
    import OffFooter from '../../components/offWeb/off-footer.vue'

    export default {
        name: 'offindex',
        components: {
            OffHeader,
            OffFooter,
        }, methods: {
            login() {
                this.$router.replace('/login')
            }
        },
        data() {
            return {}
        }
    }
</script>
<style lang="scss" scoped>
    .page-container {
        font-size: 20px;
        text-align: center;
        color: rgb(192, 204, 218);
    }

    * {
        padding: 0;
        margin: 0;
    }

    .bannerIndex {
        overflow: hidden;
    }

    .bannerFonts {
        text-align: center;
        color: #fff;
    }

    .bannerIndex {
        width: 100%;
        height: 927px;
        background: url("../../assets/offWeb/banner.png") no-repeat center;
    }

    .bannerFonts h3 {
        font-weight: 100;
        margin: 0 auto;
        font-size: 0.5rem;
        padding: 200px 0 0 0;
        height: 2px;
    }

    .bannerFonts h3 span {
        display: inline-block;
        margin: 7px 10px;
        padding: 0 15px;
        border-bottom: 2px solid rgba(247, 174, 102, 1);
    }

    .bannerFonts h1 {
        font-weight: 100;
        font-size: 1.5rem;
        padding: 50px 0 0 0;
    }

    .bannerFonts p {
        font-size: 0.3rem;
        padding: 20px 0 0 0;
        line-height: 0.5rem;
    }

    .bannerFonts p.p {
        max-width: 500px;
        margin: 0 auto;
    }

    .bannerFonts .pButton {
        font-size: 0.3rem;
        padding: 80px 0 30px 0;
    }

    .loginIS {
        background: none;
        width: 120px;
        height: 40px;
        border: 1px solid rgba(255, 247, 240, 1);
        border-radius: 25px;
        font-size: 12px;
        color: #fff;
    }

    .bannerFonts .pButton .loginIS {
        width: 3rem;
        font-size: 0.3rem;
        background: none;
        color: #fff;
        border-radius: 20px;
        height: 40px
    }

    .bannerFonts .pButton .loginIS img {
        vertical-align: middle;
        padding-right: 5px;
    }

    .bannerFonts p.pDownArrow {
        padding: 50px 0 0 0;
    }

    .bannerFonts .pButton .loginIS:hover {
        border: 1px solid #F7AE66;
        background: rgba(255, 247, 240, 0.2);
    }

    .indexDiv1 {
        width: 100%;
        overflow: hidden;
        background: #191F2E;
        color: #fff;
        text-align: center;
    }

    .indexDiv1 h3 {
        font-weight: 100;
        margin: 0 auto;
        font-size: 0.4rem;
        padding: 80px 0 0 0;
        height: 2px;
        color: #fff;
    }

    .indexDiv1 .font1 {
        padding: 50px 0 30px 0;
    }

    .indexDiv1 p {
        color: #B69D99;
        font-size: 0.24rem;
        padding: 10px 0 0 0;
        line-height: 0.4rem;
    }

    .indexDiv1 h3 span {
        display: inline-block;
        margin: 7px 10px;
        padding: 0 15px;
        border-bottom: 2px solid rgba(247, 174, 102, 1);
    }

    .indexDiv1 ul {
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .indexDiv1 li {
        max-width: 350px;
        max-height: 300px;
        width: 25%;
        background: rgba(30, 35, 50, 1);
        border: 1px solid rgba(59, 68, 87, 1);
        border-radius: 10px;
        display: inline-block;
        margin: 10px;
        padding: 10px;
    }

    .indexDiv1 li:hover {
        background: rgba(35, 43, 59, 1);
        border: 1px solid rgba(247, 174, 102, 1);
    }

    .indexDiv1 li h4 {
        font-size: 18px;
        padding: 20px 0 0 0;
        font-weight: 100;
    }

    .indexDiv1 li img {
        max-width: 118px;
        width: 40%;
    }
</style>